<template>
  <view>
   <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true"><block slot="backText">返回</block>
   	<block slot="content">个人信息</block>
   </cu-custom>
    <cmd-page-body type="top">
      <cmd-transition name="fade-up">
        <view>
          <cmd-cel-item title="头像" slot-right arrow @click="gotodetail">
            <cmd-avatar :src="mine.avatar"></cmd-avatar>
          </cmd-cel-item>
          <cmd-cel-item title="积分" addon="566" arrow></cmd-cel-item>
          <cmd-cel-item title="昵称" :addon="mine.username" arrow></cmd-cel-item>
          <cmd-cel-item title="姓名" addon="Lich" arrow></cmd-cel-item>
          <cmd-cel-item title="联系方式" addon="15676109501" arrow></cmd-cel-item>
          <cmd-cel-item title="证件号码" addon="450112xxxxxxxx2017" arrow></cmd-cel-item>
          <cmd-cel-item title="我的地址" addon="广西壮族自治区南宁市西乡塘区大学西路29号" arrow></cmd-cel-item>
          <cmd-cel-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cel-item>
          <button class="btn-logout" @click="tologout" >退出登录</button>
        </view>
      </cmd-transition>
    </cmd-page-body>
  </view>
</template>

<script>
  import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
  import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
  import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
  import cmdCelItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
  import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
  import {
      mapState 
  } from 'vuex';  
	import {
	    mapMutations  
	} from 'vuex';
  export default {
    components: {
      cmdNavBar,
      cmdPageBody,
      cmdTransition,
      cmdCelItem,
	
      cmdAvatar
    },

    data() {
      return {
		    mine:null,
	  };
    },
	onShow() {
	  this.mine=this.userInfo.data.mine;
	  console.log(this.mine)
	},
     computed: {
		...mapState(['hasLogin','userInfo'])
		
	},
    mounted() {},
    
    methods:{
		...mapMutations(['logout']),
		tologout(e){
			let that=this;
			uni.showModal({
			    title: '警告',
			    content: '你确定退出登录吗',
			    success: function (res) {
			        if (res.confirm) {
			           that.logout();
					   uni.reLaunch({
					   	url:"../login"
					   })
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		gotodetail(e){
			uni.navigateTo({
				url:"update"
			})
		},
      /**
       * 点击触发
       * @param {Object} type 跳转页面名或者类型方式
       */
      fnClick(type){
        if(type == 'modify'){
          uni.navigateTo({
            url:'/pages/user/modify/modify'
          })
        }
      }
    }
  }
</script>

<style>
	page{
		background-color: #fff;
	}
  .btn-logout {
    margin-top: 100upx;
    width: 80%;
    border-radius: 50upx;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .btn-logout-hover {
    background: linear-gradient(to right, #365fdd, #36bbfa);
  }
</style>
